import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";


import {View} from "../component/index";
import {
  UploadOutlined,
  PlusOutlined,
  DeleteOutlined,
  AccountBookOutlined,
  SaveOutlined
} from '@ant-design/icons';
import {
  Select,
  Input,
  Button,
  Modal,
  Tree,
  Upload,
  Tabs,
  Switch,
  Cascader,
  Spin,
  Radio,
  InputNumber,
  Image
} from "antd";
const { Option } = Select;
const {TextArea } = Input;
const { TabPane } = Tabs;

const sty={
  view:{
    padding:5,
    flexDirection:"row",
    jusitifyContent:"center",
    alignItems:"center",
    maxWidth:600,
    height:50,
  }
}

// 商铺编辑
@inject(["store"])
@observer
class ShopsEdit extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.shops = props.store.storeShopsEdit;
    this.shops.set("id",this.props.match.params.id?this.props.match.params.id:0)
  }
  
  componentDidMount(){
    this.store.navigation({page:"ShopsEdit"});
    this.shops.init();
  }


  // 高度
  @computed get height(){return this.store.height;}
  @computed get sys(){return this.store.website.sys;}
  @computed get user(){return this.store.user;}
  // 地区数据
  @computed get addr(){return this.store.addr;}

  // loading
  @computed get loading(){return this.shops.loading;}
  // 商铺数据
  @computed get data(){return toJS(this.shops.data);}
 
 
 
  // 是否展示大图
  @computed get previewImageVisible(){return this.shops.previewImageVisible;}
  // 展示的大图地址
  @computed get previewImageUrl(){return this.shops.previewImageUrl;}
  // 显示快递费用信息框
  @computed get companyVisible(){return this.shops.companyVisible;}
  // 邮费相关
  @computed get postage(){return this.shops.postage;}
 
  // 显示图片
  handlePreview= async file=>  {
    if (!file.url && !file.preview) {
      file.preview = await this.shops.getBase64(file.originFileObj);
    }
    this.shops.set("previewImageVisible",true);
    this.shops.set("previewImageUrl",file.url);
  };

  
    // 快递费用信息框
  _modal(){
    return(
      <Modal
        title="输入快递公司名称"
        visible={this.companyVisible}
        onOk={()=>{
          const tempPostage=this.data.postage;
          const obj = {
              title:this.postage.company,//快递名称
              first:this.postage.first,//首重
              continued:this.postage.continued,//续重
              price:{}//pxxx:{first:首重价格,continue:续重价格}
            };
          
          this.addr.map(province=>{
            if(province.children){
              province.children.map(city=>{
                obj.price[`p${city.value}`]={first:1,continue:1};
              });
            }else{
              obj.price[`p${province.value}`]={first:1,continue:1};
            }
          });
          tempPostage.push(obj);
          this.shops.set("data-postage",tempPostage);
          this.shops.set("postage",{
            company:"",
            first:"",
            continued:"",
          });
          this.shops.set("companyVisible",false);
        }}
        onCancel={()=>{
          this.shops.set("postage",{
            company:"",
            first:"",
            continued:"",
          });
          this.shops.set("companyVisible",false);
        }}
        >
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="名称"
          disabled={this.loading}
          value={this.postage.company}
          placeholder="快递公司名称"
          onChange={e=>this.shops.set("postage-company",e.target.value)}
        />
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="首重"
          addonAfter="g"
          placeholder="首重重量，以克为单位"
          disabled={this.loading}
          value={this.postage.first}
          onChange={e=>this.shops.set(`postage-first`,e.target.value)}
        />
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="续重"
          addonAfter="g"
          placeholder="续重重量，以克为单位"
          disabled={this.loading}
          value={this.postage.continued}
          onChange={e=>this.shops.set(`postage-continued`,e.target.value)}
        />
      </Modal>
    );
  }

  _onEdit(targetKey, action){
    this[`_${action}`](targetKey);
  }
  // 增加一个快递信息
  _add(){
    if(this.data.postage.length>=this.sys.postagenum){
      this.store.antd.message.error(`不能超过${this.sys.postagenum}个快递信息`);
      return;
    }
    this.shops.set("company","");
    this.shops.set("companyVisible",true);
  }
  // 删除一个快递信息
  _remove(targetKey){
    let tempPostage=[];
    this.data.postage.map((item,index)=>{
      if(Number(targetKey) !== index){
        tempPostage.push(item);
      }
    });
    this.shops.set("data-postage",tempPostage);
  }
  
  // 图片限制
  _beforeUpload(file) {
    const cont = this.sys.filetype?this.sys.filetype.replace(/,/g,"|"):"jpg|jpeg|png|gif";
    const reg = new RegExp("".concat(cont,"$"));
    const isJpgOrPng = reg.test(file.type);
    if (!isJpgOrPng) {
      this.store.antd.message.error(`请上传这些格式的图片(${this.sys.filetype})`);
    }
    const isLt2M = file.size / 1024 / 1024 < (this.sys.filesize?Number(this.sys.filesize):1);
    if (!isLt2M) {
      this.store.antd.message.error(`图片大小不能超过${this.sys.filesize}MB`);
    }
    return isJpgOrPng && isLt2M;
  }

  render(){
    if(!this.data.shops){
      return <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        <Spin />
      </View>;
    }
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const tabSty={
      overflowY:"auto",
      // tab内的高度
      height:this.height-150,
    };
    const {shops,postage,check} = this.data;
    const image = /\.(png|jpg|jpeg|gif)$/.test(shops.image)?<Image alt="图片" style={{width:25,height:25,marginRight:10}} src={shops.image} />:null;
    // 地址中文名称
    const addr = "".concat(
                      this.store.getAddrTitle(shops.province),
                      shops.province?"/":"",
                      this.store.getAddrTitle(shops.city),
                      shops.city?"/":"",
                      this.store.getAddrTitle(shops.district),
                    );
    return (
      <View style={{flexDirection:"column",height:this.height,width:"100%",paddingLeft:10,paddingRight:10}}>
        <Tabs defaultActiveKey="shops">
          <TabPane style={tabSty} tab="商铺信息" key="shops">
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="商铺用户"
                disabled={this.loading}
                placeholder="绑定商铺用户"
                value={shops.id}
                onChange={e=>this.shops.set("data-shops-id",e.target.value.match(/^\d{0,11}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="商铺名称"
                disabled={this.loading}
                placeholder="商品名称(30个字符以内)"
                value={shops.tit}
                onChange={e=>this.shops.set("data-shops-tit",e.target.value.match(/^\S{0,30}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Cascader
                options={this.addr}
                placeholder="选择省份城市"
                onChange={(value,selectedOptions)=>{
                  value.map((item,index)=>{
                    if(index===0){this.shops.set("data-shops-province",item);}
                    if(index===1){this.shops.set("data-shops-city",item);}
                    if(index===2){this.shops.set("data-shops-district",item);}
                  })
                }}
                changeOnSelect
                >
                <Input
                  addonBefore="商铺地区"
                  readOnly 
                  value={addr}
                />
              </Cascader>
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="商铺地址"
                disabled={this.loading}
                placeholder="详细地址"
                value={shops.address}
                onChange={e=>this.shops.set("data-shops-address",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Input
                disabled={true}
                style={{flex:1,marginRight:10}}
                value={shops.image} 
                onChange={e=>this.shops.set("data-shops-image",e.target.value)}
                addonBefore="商铺图片"
              />
              {image}
              <Upload
                withCredentials
                showUploadList={false}
                name="image"
                action={this.store.url.concat("?act=admin-upload&tp=image")}
                onChange={info=>this.shops.uploadChange(info,"image")}
                >
                <Button size="small" loading={this.loading} type="primary" icon={<UploadOutlined />} />
              </Upload>
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="联系人"
                disabled={this.loading}
                placeholder="联系人"
                value={shops.name}
                onChange={e=>this.shops.set("data-shops-name",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="联系电话"
                disabled={this.loading}
                placeholder="联系电话"
                value={shops.phone}
                onChange={e=>this.shops.set("data-shops-phone",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="支付宝账号"
                disabled={this.loading}
                placeholder="绑定支付宝"
                value={shops.zfb}
                onChange={e=>this.shops.set("data-shops-zfb",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Input
                size="large"
                addonBefore="支付宝用户姓名"
                disabled={this.loading}
                placeholder="支付宝用户姓名"
                value={shops.zfbname}
                onChange={e=>this.shops.set("data-shops-zfbname",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={Object.assign({},sty.view,{height:"auto"})}>
              <TextArea
                rows={3}
                size="large"
                disabled={this.loading}
                placeholder="商铺简介"
                value={shops.note}
                onChange={e=>this.shops.set("data-shops-note",e.target.value.match(/^\S{0,100}/g)[0])}
              />
            </View>
            <View style={sty.view}>
              <Button
                style={{width:"100%"}}
                size="large"
                type="primary"
                disabled={this.loading}
                loading={this.loading}
                danger
                icon={<SaveOutlined />}
                onClick={()=>this.shops.submit()}>
                保存商铺信息
              </Button>
            </View>
          </TabPane>
        </Tabs>

      </View>
    );
  }
}

export default ShopsEdit;